<template lang='pug'>
  .pos-r.input-h24.mt-20
    .d-f-c.pb-20(v-for="(item, index) in details" :key="index")
      Input.input-has-border(v-model="item.amount" type="number" style="width:100px")
      span  元/年，费用开始月：
      Select.input-has-border(v-model="item.startMonth"  placeholder="请选择"  style="width:100px")
        Option(v-for="(item, idx) in monthArr" :value="item.key" :key="idx") {{ item.value }}
      .early-collection.ml-15 是否提前收取：
        i-switch(v-model="item.isAhead")
          span(slot="open") 是
          span(slot="close") 否
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    fuwufeiModel1: Boolean,
    commonDate: Object,
    rateDetails: Array,
    value: Number,
    SFFirst: Boolean
  },
  data () {
    return {
      details: [
        {amount: 0, startMonth: '1', isAhead: true}
      ],
      posDetails: [],
      monthArr: [
        {key: '1', value: '1月'},
        {key: '2', value: '2月'},
        {key: '3', value: '3月'},
        {key: '4', value: '4月'},
        {key: '5', value: '5月'},
        {key: '6', value: '6月'},
        {key: '7', value: '7月'},
        {key: '8', value: '8月'},
        {key: '9', value: '9月'},
        {key: '10', value: '10月'},
        {key: '11', value: '11月'},
        {key: '12', value: '12月'},
      ],
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    chargeChange (val) {
      console.log(val)
    },
    submit () {
      console.log(this.value)
      if (this.fuwufeiModel1) {
        this.posDetails = this.details
      } else {
        this.posDetails = []
      }
      this.postYearlySFProject()
    },
    postYearlySFProject () {
      InsureProjectApi.PostYearlySFProject({
        Name: this.commonDate.name,
        Type: this.value,
        FollowInsure: this.commonDate.hasInsure,
        Details: this.details,
        RateDetails: this.rateDetails,
        SFFirst: this.SFFirst
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {
  }

}

</script>
<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>